<template>
  <div class="seven_content myStyle">
    <div class="content_top">
      <StrokeTitle2 title="环比变化" class="float margin" style="width: 27.3%">
        <div class="flex_center" slot="select">
          <!-- <ElementRadio v-model="model" :isButton="true" :options="[  {
            value: 'lastMonth', label: '上月' },{value: 'quarter',label: '当季'}]" @change="radioChange1" /> -->
          <el-select v-model="top1Form.ggname" placeholder="请选择" size="mini" style="width:80px" @change="kanbantop">
            <el-option v-for="item in selectList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="flex_center Echarts" style="height:100%" slot="content">
          <div class="calculagraph_left">
            <Ring class="ting" :data="{allRate:top1.a1}" subtext="" titleTop="43%" />
            <div class="label" style="margin-top:1px">实际值</div>
          </div>
          <div class="calculagraph_right">
            <StrokeItem rightWidth="60%" leftWidth="40%" title="上期实际值" :number="top1.mom" />
            <StrokeItem rightWidth="60%" leftWidth="40%" style="margin-top:8px" title="环比变化" :number="top1.permom*100+'%'" unit="%" />
          </div>
          <!-- <PieImg5 legendLeft="53%" legendLabel="个" cirTop="0.3" :isTitle="true" length="5" itemWidth="0.85" cirLeft="0.9" style="height: 100%" :data="top1" :img="require('@/assets/images/echarts/7pingpei.png')" /> -->
          <!-- <MoreRing legendLeft="58%" label="" length="5" labelLength="1" airLeft="28" imgLeft="1.1" itemWidth="1.1" imgWidth="1.2" :img="require('@/assets/images/echarts/zhanbi.png')" :data="top1" /> -->
        </div>
      </StrokeTitle2>
      <StrokeTitle2 title="近半年消耗率趋势" class="float margin" style="width: 39.3%">
        <div class="flex_center" slot="select">
          <ElementSelect ref="psNameSelect" :isSelected="true" @select="selectList2" :isAll="true" :isClearable="false"/>
        </div>
        <div class="flex_center Echarts" style="height:100%" slot="content">
          <NormalLine legendLeft="28%" :isTitle="true" length="5" itemWidth="0.85" cirLeft="0.2" :data="top2" />
        </div>
      </StrokeTitle2>
      <StrokeTitle2 title="生产效率" class="float margin" style="width: 30.4%">
        <div class="flex_center" slot="select">
          <ElementRadio v-model="model" :isButton="true" :options="[  {
            value: 'lastMonth', label: '上月' },{value: 'quarter',label: '当季'}]" @change="radioChange3" />
          <ElementSelect ref="psNameSelect" :isSelected="true" @select="selectList3" :isClearable="false" width="80px"/>
          <div class="all_box" style="margin-left:5px" @click="kanbanrightAll">
            全部
          </div>
        </div>
        <div class="flex_center Echarts" style="height:100%" slot="content">
          <XRow barWidth="6" :data="top3" xUnit=" " barRight="19%" barLeft="10%" />
        </div>
      </StrokeTitle2>
    </div>
    <div class="content_center">
      <StrokeTitle2 title="同比变化" class="float margin" style="width: 27.3%">
        <div class="flex_center" slot="select">
          <ElementRadio v-model="model" :isButton="true" :options="[  {
            value: 'lastMonth', label: '上月' },{value: 'quarter',label: '当季'}]" @change="radioChange4" />
          <el-select v-model="center1Form.ggname" placeholder="请选择" size="mini" style="width:80px;" @change="kanbancenter1">
            <el-option v-for="item in selectList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="flex_center Echarts" style="height:100%" slot="content">
          <div class="calculagraph_left">
            <Ring class="ting" :data="{allRate:center1.a1}" subtext="" titleTop="43%" />
            <div class="label" style="margin-top:1px">实际值</div>
          </div>
          <div class="calculagraph_right">
            <StrokeItem rightWidth="60%" leftWidth="40%" title="上期实际值" :number="center1.yoy" />
            <StrokeItem rightWidth="60%" leftWidth="40%" style="margin-top:8px" title="同比变化" :number="center1.peryoy*100+'%'" unit="%" />
          </div>
          <!-- <PieImg5 legendLeft="28%" legendLabel="个" cirTop="0.3" :isTitle="true" length="5" itemWidth="0.85" cirLeft="0.2" style="height: 100%" :data="center1" :img="require('@/assets/images/echarts/7pingpei.png')" /> -->
        </div>
      </StrokeTitle2>
      <StrokeTitle2 title="当年十二月实际值变化趋势" class="float margin" style="width: 70.7%">
        <div class="flex_center" slot="select">
          <el-select v-model="center2Form.ggname" placeholder="请选择" size="mini" style="width:220px" @change="kanbancenter2">
            <el-option v-for="item in selectList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="flex_center Echarts" slot="content" style="height:100%">
          <MoreDirection3 :data="bottom" :legendData="['实际','内控']" :isMoretooltip="true" :isCategory="false" barWidth="21" style="height: calc(100% - 0px)" :yAxisLineShow="true" :xAxisLineShow="true" yUnit="" />
        </div>
      </StrokeTitle2>
    </div>
    <div class="content_bottom">
      <StrokeTitle2 title="原物料消耗率分析" class="float margin" style="width: 99%">
        <div class="flex_center" slot="select">
          <!-- <ElementDateSelect type="monthrange" @dateSelect="dateSelect" :isSectione="true"/> -->
          <el-date-picker :clearable="false" v-model="bottom1Form.dyjsrq" @input="dateSelect($event)" type="month" value-format="yyyy-MM" placeholder="选择月">
          </el-date-picker>
        </div>
        <MoreColBar :data="bottom1" :xAxisLine="true" :yAxisLine="true" slot="content" :formData="{end:bottom1Form.dyjsrq,
        start:bottom1Form.dyksrq}" />
      </StrokeTitle2>
    </div>
    <AllDialog ref="AllDialog" />
  </div>
</template>

<script>
import {
  Kanbantop,
  Kanbantop2,
  Kanbanright,
  Kanbanywl,
  LastTenYears,
} from "@/api/echarts/seven/materialsSupplies";
import StrokeTitle2 from "@/components/myComponents/stroke/title2.vue";
import NormalLine from "@/components/echarts/line/normal.vue";
import PieImg5 from "@/components/echarts/pie/img5.vue";
import { list, listPost } from "@/api/dialog/index";
import MoreDirection3 from "@/components/echarts/bar/moreDirection3.vue"; //多个纵向柱状图上下
export default {
  components: {
    NormalLine,
    PieImg5,
    StrokeTitle2,
    MoreDirection3,
  },
  data() {
    return {
      model: "lastMonth",
      selectList: [
        { value: "瓶坯", label: "瓶坯" },
        { value: "瓶盖", label: "瓶盖" },
        { value: "商标", label: "商标" },
      ],
      //环比变化
      top1: {
        a1: 0, //实际数据
        mom: 0, //环比上期
        yoy: 0, //同比上期
        permom: 0, //环比数据
        peryoy: 0, //同比数据
      },
      top1Form: {
        jsrq: this.$getLastMonth("e"),
        ksrq: this.$getLastMonth("s"),
        ggname: "瓶坯",
      },
      //近半年消耗率趋势
      top2: {},
      top2Form: {
        val: 1,
        ggname: "全部",
      },
      //生产效率
      top3: [],
      top3Form: {
        jsrq: this.$getLastMonth("e"),
        ksrq: this.$getLastMonth("s"),
        val: 1,
        ggname: "",
        all: "",
      },
      //同比变化
      center1: {
        a1: 0, //实际数据
        mom: 0, //环比上期
        yoy: 0, //同比上期
        permom: 0, //环比数据
        peryoy: 0, //同比数据
      },
      center1Form: {
        jsrq: this.$getLastMonth("e"),
        ksrq: this.$getLastMonth("s"),
        ggname: "瓶坯",
      },
      //瓶盖-各生产品项占比
      center2: [],
      center2Form: {
        ggname: "瓶坯",
      },

      //当年十二月实际值变化趋势
      bottom: [],
      //原物料消耗率分析
      bottom1Form: {
        dyksrq: this.$getLastMonth("s"),
        dyjsrq: this.$getLastMonth("e"),
      },
      bottom1: {
        xData: ["瓶坯", "瓶盖", "商标"],
        yData1: [],
        yData2: [],
        yData3: [],
        yData4: [],
      },
      color: ["blue", "orange", "green", "pink"],
    };
  },
  mounted() {
    this.kanbantop(); //环比变化
    this.kanbancenter1(); //同比变化
    this.getList();
    this.kanbancenter2(); //当年十二月实际值变化趋势
     this.kanbantop2(); //近半年消耗率趋势
    this.kanbanright(); //生产效率
    this.kanbanywl(); //原物料消耗率分析
  },
  methods: {
    //获取商品列表
    getList() {
      list(
        "/basic/productInfo/listSelect",
        { pageNum: 1, pageSize: 320 },
        "GET"
      ).then((res) => {
        // this.top2Form.ggname = res.rows[0].name;
        // this.kanbantop2(); //近半年消耗率趋势
      });
    },
    dateSelect(e) {
      this.bottom1Form.dyksrq = this.$serveGetMonth(e, "s");
      this.bottom1Form.dyjsrq = this.$serveGetMonth(e, "e");
      this.kanbanywl();
    },
    //环比变化时间切换
    radioChange1(e) {
      this.top1Form.ksrq = e[0];
      this.top1Form.jsrq = e[1];
      this.kanbantop();
    },
    //环比变化选择器切换
    selectList1(e) {
      this.top1Form.ggname = e;
      if (e == "全部") {
        this.top1Form.val = 1;
      } else {
        this.top1Form.val = 0;
      }
      this.kanbantop();
    },
    //环比变化
    kanbantop() {
      Kanbantop(this.top1Form).then((res) => {
        if (res.code == 200) {
          this.top1 = res.data;
        }
      });
    },
    //近半年消耗率趋势选择器切换
    selectList2(e) {
      this.top2Form.ggname = e;
      if (e == "全部") {
        this.top2Form.val = 1;
      } else {
        this.top2Form.val = 0;
      }
      this.kanbantop2();
    },
    //近半年消耗率趋势
    kanbantop2() {
      Kanbantop2(this.top2Form).then((res) => {
        this.top2 = res.data;
      });
    },
    //生产效率时间切换
    radioChange3(e) {
      this.top3Form.ksrq = e[0];
      this.top3Form.jsrq = e[1];
      this.kanbanright();
    },
    //生产效率选择器切换
    selectList3(e) {
      this.top3Form.ggname = e;
      if (e == "全部") {
        this.top3Form.val = 1;
      } else {
        this.top3Form.val = 0;
      }
      this.kanbanright();
    },
    //生产效率
    kanbanright() {
      Kanbanright(this.top3Form).then((res) => {
        if (res.code == 200) {
          this.top3 = res.data;
        }
      });
    },
    //生产效率-全部
    kanbanrightAll() {
      let obj = JSON.parse(JSON.stringify(this.top3Form));
      obj.all = "111";
      Kanbanright(obj).then((res) => {
        if (res.code == 200) {
          this.$refs.AllDialog.unit = "";
          this.$refs.AllDialog.right.unit = "";
          this.$refs.AllDialog.tableData.data = res.data;
        }
        this.$refs.AllDialog.dialogTableVisible = true;
      });
    },
    //同比变化时间切换
    radioChange4(e) {
      this.center1Form.ksrq = e[0];
      this.center1Form.jsrq = e[1];
      this.kanbancenter1();
    },
    //同比变化
    kanbancenter1() {
      Kanbantop(this.center1Form).then((res) => {
        if (res.code == 200) {
          this.center1 = res.data;
        }
      });
    },
    //当年十二月实际值变化趋势
    kanbancenter2() {
      LastTenYears(this.center2Form).then((res) => {
        if (res.code == 200) {
          this.bottom = [];
          for (let item of res.data) {
            let obj = {};
            obj.name = item.month;
            obj.value1 = item.tjy;
            obj.value2 = item.nkbz;
            this.bottom.push(obj);
          }
        }
      });
    },
    //原物料消耗率分析
    kanbanywl() {
      this.bottom1 = {
        xData: ["瓶坯", "瓶盖", "商标"],
        yData1: [],
        yData2: [],
        yData3: [],
        yData4: [],
      };
      Kanbanywl(this.bottom1Form).then((res) => {
        // console.log(res);
        if (res.code == 200) {
          this.bottom1 = {
            xData: ["瓶坯", "瓶盖", "商标"],
            yData1: [
              Number(res.data[0].pp),
              Number(res.data[0].pg),
              Number(res.data[0].sb),
            ],
            yData2: [
              Number(res.data[1].pp),
              Number(res.data[1].pg),
              Number(res.data[1].sb),
            ],
            yData3: [
              Number(res.data[2].pp),
              Number(res.data[2].pg),
              Number(res.data[2].sb),
            ],
            // yData4: [
            //   Number(res.data[3].pp),
            //   Number(res.data[3].pg),
            //   Number(res.data[3].sb),
            // ],
          };
        }
      });
    },

    radioChange() {},
  },
};
</script>


<style lang="scss" scoped>
.seven_content {
  z-index: 10;
  background: #093b76;
  width: 100%;
  height: calc(100vh - 183px);
  overflow: auto;
  // overflow: hidden;
  .content_top,
  .content_bottom,
  .content_center {
    //   background: res;
    width: 100%;
    // height: 34.8%;
    height: 30.8%;
    .calculagraph_right,
    .calculagraph_left {
      width: 40%;
      height: 100%;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      position: relative;
      float: left;
      margin-left: -8%;
    }
    .calculagraph_right {
      width: 44%;
      align-items: flex-start;
      justify-content: center;
      height: 95%;
      margin-left: 0%;
    }
  }
  .content_top {
    height: 30.8%;
  }
  .content_bottom {
    // height: 28.9%;
    height: 31.5%;
  }
  .cntj_box {
    width: 100%;
    height: 100%;
    padding: 15px;
    .cntj_item {
      width: 24.5%;
      background: linear-gradient(
        180deg,
        rgba(44, 119, 187, 0.5) 0%,
        rgba(18, 81, 141, 0.5) 100%
      );
      border: 1px solid #2489ee71;
      height: 100%;
      padding: 15px;
      nav {
        font-size: 20px;
        background: rgba(35, 107, 173, 0.7);
        height: 28%;
        width: 100%;
        text-align: center;
      }
      .cntj_item_content {
        width: 100%;
        height: 66%;

        margin-top: 2%;
        .cntj_item_content_item {
          width: 49%;
          background-image: url("~@/assets/images/echarts/zhuangshi.png");
          background-size: 100% 100%;
          height: 100%;
          background-color: rgba(35, 107, 173, 0.7);
          .number {
            font-size: 37px;
          }
          .unit {
            font-size: 17px;
            margin-top: 3%;
            color: #ffffff;
          }
        }
      }
    }
  }
  .Echarts {
    height: calc(100% - 50px);
  }
  .center_echarts {
    height: 180px;
  }
}
.ring {
    width: 128px;
    height: 128px
  }
</style>